@codemirror/view

What is @codemirror/view?

The @codemirror/view package is a part of the CodeMirror 6 code editor ecosystem. It provides the view layer for the editor, which is responsible for rendering the document and handling user interactions. It is designed to be extensible and customizable, allowing developers to create sophisticated code editing interfaces.

What are @codemirror/view's main functionalities?

Editor View Creation

This feature allows you to create a new editor view and attach it to the DOM. The 'parent' option specifies the DOM element to which the editor should be appended.

import { EditorView } from '@codemirror/view';

const view = new EditorView({
  parent: document.body
});

Customizing the Appearance

This feature enables customization of the editor's appearance using decorations and extensions, such as highlighting special characters, drawing selections, and showing a drop cursor.

import { EditorView, highlightSpecialChars, drawSelection, dropCursor } from '@codemirror/view';

const view = new EditorView({
  parent: document.body,
  decorations: EditorView.decorations.of(highlightSpecialChars()),
  extensions: [drawSelection(), dropCursor()]
});

Handling User Input

This feature involves handling user input through keymaps, which define how keyboard events are handled. The 'defaultKeymap' provides a set of standard key bindings for common editor actions.

import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';

const view = new EditorView({
  parent: document.body,
  extensions: [keymap.of(defaultKeymap)]
});

Other packages similar to @codemirror/view

monaco-editor

Monaco Editor is the code editor that powers VS Code. It offers rich IntelliSense, validation, and advanced editing features. Compared to @codemirror/view, Monaco is a full-featured editor with a larger bundle size and is less modular.

ace

Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, themes, and extensions. While Ace is also extensible and customizable, @codemirror/view is part of a newer generation of editors with a more modern and modular architecture.

codemirror

CodeMirror (version 5 and below) is the predecessor to @codemirror/view. It is a versatile text editor implemented in JavaScript for the browser. Compared to @codemirror/view, it is less modular and not as optimized for performance and extensibility in modern web applications.

README

@codemirror/view

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements the DOM view component for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

0.19.48 (2022-03-30)

Bug fixes

Fix an issue where DOM syncing could crash when a DOM node was moved from a parent to a child node (via widgets reusing existing nodes).

To avoid interfering with things like a vim mode too much, the editor will now only activate the tab-to-move-focus escape hatch after an escape press that wasn't handled by an event handler.

Make sure the view measures itself before the page is printed.

Tweak types of view plugin defining functions to avoid TypeScript errors when the plugin value doesn't have any of the interface's properties.